<script setup>
import Demo10Component03Children01 from './demo10-component03-children01.vue';
import Demo10Component03Children02 from './demo10-component03-children02.vue';
import Demo10Component03Children03 from './demo10-component03-children03.vue';
import Demo10Component03Children04 from './demo10-component03-children04.vue';
import Demo10Component03Children05 from './demo10-component03-children05.vue';
import Demo10Component03Children06 from './demo10-component03-children06.vue';
import Demo10Component03Children07 from './demo10-component03-children07.vue';
</script>
<template>
<div>
  <h2>demo10-component03.vue</h2>
  <div class="zhtt-demo-card">
    <div class="zhtt-demo-card-header"> v-model</div>
    <div  class="zhtt-demo-card-body">
      <demo10-component03-children01 v-model="searchText"></demo10-component03-children01> &nbsp;{{searchText}}
    </div>
    <div class="zhtt-demo-card-footer"></div>
  </div>

  <div class="zhtt-demo-card">
    <div class="zhtt-demo-card-header"> v-model</div>
    <div  class="zhtt-demo-card-body">
      <demo10-component03-children02 v-model="searchText"></demo10-component03-children02> &nbsp;{{searchText}}
    </div>
    <div class="zhtt-demo-card-footer"></div>
  </div>

  <div class="zhtt-demo-card">
    <div class="zhtt-demo-card-header">绑定多个v-model</div>
    <div  class="zhtt-demo-card-body">
      <demo10-component03-children03
          v-model:modelValue1="searchText"
          v-model:modelValue2="searchText"
      ></demo10-component03-children03> &nbsp;{{searchText}}
    </div>
    <div class="zhtt-demo-card-footer"></div>
  </div>

  <div class="zhtt-demo-card">
    <div class="zhtt-demo-card-header">自定义修饰符：转大写</div>
    <div  class="zhtt-demo-card-body">
      <demo10-component03-children04
          v-model.capitalize="searchText0401"
      ></demo10-component03-children04>
      searchText0401：{{searchText0401}}<br/>
    </div>
    <div class="zhtt-demo-card-footer"></div>
  </div>

  <div class="zhtt-demo-card">
    <div class="zhtt-demo-card-header">带参数的 v-model绑定修饰符</div>
    <div  class="zhtt-demo-card-body">
      <demo10-component03-children04
          v-model:modelValue.capitalize="searchText0401"
      ></demo10-component03-children04>
      searchText0401：{{searchText0401}}<br/>
    </div>
    <div class="zhtt-demo-card-footer"></div>
  </div>

  <div class="zhtt-demo-card">
    <div class="zhtt-demo-card-header">带参数的 v-model绑定修饰符</div>
    <div  class="zhtt-demo-card-body">
      <demo10-component03-children05
          v-model:modelValue.capitalize="searchText0401"
      ></demo10-component03-children05>
      searchText0401：{{searchText0401}}<br/>
    </div>
    <div class="zhtt-demo-card-footer"></div>
  </div>

  <div class="zhtt-demo-card">
    <div class="zhtt-demo-card-header">带参、不带参的 v-model绑定修饰符</div>
    <div  class="zhtt-demo-card-body">
      <demo10-component03-children06
          v-model:modelValue.capitalize="searchText0401"
      ></demo10-component03-children06>
      searchText0401：{{searchText0401}}<br/>
    </div>
    <div class="zhtt-demo-card-footer"></div>
  </div>

  <div class="zhtt-demo-card">
    <div class="zhtt-demo-card-header">带参、不带参的 v-model绑定修饰符</div>
    <div  class="zhtt-demo-card-body">
      <demo10-component03-children07
          v-model:modelValue.capitalize="searchText0401"
      ></demo10-component03-children07>
      searchText0401：{{searchText0401}}<br/>
    </div>
    <div class="zhtt-demo-card-footer"></div>
  </div>

</div>

</template>

<script>
export default {
  name: "demo10-component03",
  data(){
    return {
      searchText:null,
      searchText0401:null,
      searchText0402:null,
    }
  }
}
</script>

<style scoped>

</style>